import React from 'react'
// import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { Debt, Common } from "../../const/imgs"
import ShowImgList from '../components/ShowImgs'
import { chechPics } from '../../utils/RegUtil'
import { getInfo } from '../../utils/StorageUtil';

class CollectionItem extends React.Component {
  
  render() {
    const {
        record_type, // 0上门催收 1电话催收 2智能云呼 3人工坐席
        result, // 催收结果
        content, //补充兼备注
        collect_addr_detail, //催收详细地址
        create_time, // 催收记录创建时间
        collector_name ,  // 催客姓名
        return_meney, // 收回金额
        last_returnmoney_time, // 最后一次收回金额时间
        // phone,
    } = this.props.cuijiId? this.props.cuijiId:getInfo('cuiji')
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }}>
        <div className={styles['debt_item']} style={{ color: Config.fontColor }} >

          <div className={styles['debt_item']} style={{ color: Config.fontColor }} >

            <div className={styles['debt_data']}>
              <div className={styles['coll_title_flex']}>
                <span style={{ display: 'flex', alignItems: 'center' }}>
                  <img className={styles['coll_title_icon']} src={Debt.DH} alt='' />
                  {parseInt(record_type,10) === 0 && "上门催收 "}
                  {parseInt(record_type,10) === 1 && "电话催收 "}
                  {parseInt(record_type,10) === 2 && "智能云呼 "}
                  {parseInt(record_type,10) === 3 && "人工坐席 "}
                </span>
                <span style={{ color: Config.fontColor1, fontSize: '12px' }}>
                  {create_time}
                </span>
              </div>
              <div className={styles['debt_data_list']}>
              {collector_name&&<Cell title={'催客：'+collector_name} des1={result} des2={null} />}
                {return_meney !== null &&
                  return_meney.split(',').map((ite, index) =>
                    <Cell key={index} index={index} title='还款' des1={'还款金额：' + ite} des2={'还款时间：' + last_returnmoney_time.split(',')[index]} />
                  )
                }
                <Cell title={"补充:" + content + ""} des1='' />
                <ShowImgList imgList={chechPics(this.props.cuijiId)} isAll={true} />
                {collect_addr_detail && collect_addr_detail !== '' && collect_addr_detail !== 'undefined' &&
                  <LocationCell des2={collect_addr_detail} />
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


const Cell = ({ title, des1, des2,index }) => {
  return (
    <div className={styles['coll_item_cell']}>
      { !index>0&& <div className={styles['coll_cell_firstline']} >
        <div className={styles['coll_cell_icon']}>
          <div className={styles['coll_cell_desc']}>
          </div>
        </div>
        <div>
          {title}
        </div>
      </div>}
      <div className={styles['coll_cell_secondline']}>
        <div className={styles['coll_cell_icon']}>
        </div>
        <div>
          {des1}
        </div>
      </div>
      <div className={styles['coll_cell_secondline']}>
        <div className={styles['coll_cell_icon']}>
        </div>
        <div>
          {des2}
        </div>
      </div>
    </div>
  )
}
const LocationCell = ({ des2 }) => {
  return (
    <div className={styles['coll_item_cell']}>
      <div className={styles['coll_cell_secondline']} style={{alignItems:"flex-start"}}>
        <div style={{          
          width: '24px',    display: 'flex',   justifyContent: 'center',
          padding:'5px 0'
        }}>
          <img src={Common.DZH} alt='' />
        </div>
        <div>
          {des2}
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

export default connect(mapStateToProps)(CollectionItem);